123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384 |
- "use client";
- import { GlobalNoticeRep, updateGlobalNoticeApi, updateUserNoticeApi } from "@/api/home";
- import Box from "@/components/Box";
- import Empty from "@/components/Empty";
- import { timeFormat } from "@/utils/methods";
- import { Badge, Collapse } from "antd-mobile";
- import { useLocale } from "next-intl";
- import { useState } from "react";
- import style from "./style.module.scss";
- interface Props {
- data: GlobalNoticeRep[];
- type: "system" | "user";
- }
- const SystemMessage = (props: Props) => {
- const { data, type } = props;
- const locale = useLocale();
- const [noticesData, setNoticesData] = useState<GlobalNoticeRep[]>(data);
- const collapseChange = (active: string | null) => {
- if (!active) return;
- const isRead = noticesData.find((item) => item.id === +active)?.is_read;
- if (isRead) return;
- const newNotices = noticesData.map((item) => {
- if (item.id === +active && !item.is_read) {
- return { ...item, is_read: true };
- } else {
- return item;
- }
- });
- if (type === "system") {
- updateGlobalNoticeApi(+active).then((r) => {});
- } else {
- updateUserNoticeApi(+active);
- }
- setNoticesData(newNotices);
- };
- if (!noticesData.length) return <Empty />;
- return (
- <div className={style.messageCollapse}>
- <Collapse accordion onChange={collapseChange}>
- {noticesData.map((notice, index) => (
- <Collapse.Panel
- key={`${notice.id}`}
- title={
- <section>
- <header className={"flex items-center"}>
- <h6 className={""}>{notice.content?.title}</h6>
- <Badge
- className={`ml-[0.1rem] h-[0.06rem] w-[0.06rem]`}
- style={{ "--color": "#f0dc00" }}
- content={!notice.is_read ? Badge.dot : ""}
- ></Badge>
- </header>
- <p className={"text-[12px] text-[#64676d]"}>
- {notice.send_time
- ? timeFormat(notice.send_time!, locale)
- : timeFormat(notice.send_user_time!, locale)}
- </p>
- </section>
- }
- >
- <div>
- <p className={"text-[16px] text-[#c1c6d2]"}>{notice.content?.text}</p>
- <img src={notice.content?.image} alt="" />
- <div
- className={`-mb-[12px] mt-[0.0694rem] flex h-[0.2778rem] items-center justify-center border-t-[0.006rem] border-[#454545] text-[#64676d]`}
- >
- <Box action={notice.action_type} actionData={notice.action_params}>
- <p className={"text-[0.1111rem]"}>{notice.content?.word}</p>
- </Box>
- <span
- className={"iconfont icon-xiangyou2 ml-[5px] text-[0.08rem]"}
- ></span>
- </div>
- </div>
- </Collapse.Panel>
- ))}
- </Collapse>
- </div>
- );
- };
- export default SystemMessage;
|